*{
	margin: 0;
	padding: 0;
}

.w{
	width: 1280px;
	margin: 0 auto;	
}
.fl{
	float: left;
}
.fr{
	float: right;
}
li{
	/* 去除小圆点 */
	list-style: none;
}
a{
	display: block;
	/* 去除下划线 */
	text-decoration: none;
}
.clearfix::before,.clearfix::after{
			content:"";
			display: table;
		}
		.clearfix::after{
			clear:both;
		}
@keyframes banner_t {
    0%{
        transform: translate(-1300px,0px);
    }
    100%{
        transform: translate(0,0);
    }
}
@keyframes banner_c {
    0%{
        transform: translate(0,-300px);
    }
    100%{
        transform: translate(0,0px);
    }
}
@keyframes banner_s {
   0%{
       transform: translate(1300px,0px);
   }
   100%{
       transform: translate(0,0);
   }
}
@keyframes t_rotate {
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes t_scale {
    0%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(1.5,1.5);
    }
    100%{
        transform: scale(1,1);
    }
}
.clearfix::after{
	clear:both;
}
header{
	background: url(../img/oshin-slide-1.jpg) no-repeat;
	background-size: cover;
	height: 824px;
}
header ul{
	padding-left: 105px;
}
header ul li a{
	line-height: 100px;
	color: black;
	padding-left: 36px;
}
header ul li a:hover{
	color: #e4bc78;
} 
p{
	text-align: center;
}
.logo{
	padding-top: 25px;
	padding-left: 30px;
}
.tubiao{
	padding-top: 30px;
	padding-left: 75px;
}
.tubiao span{
	display: block;
	margin-left: 30px;
	margin-top: 12px; 
	transition: all 0.2s;
} 
.tubiao .fl:nth-child(n):hover{
	animation: t_rotate 1s;
} 
.mark{
	padding-top: 150px;
}
.mark a{
	line-height: 90px;
	color: black;
}
.mark p:nth-child(1) a{
	font-size: 18px;
	padding-bottom: 14px;
	letter-spacing: 2px;
	animation: banner_t 1s;
}
.mark p:nth-child(2) a{
	margin-left: 610px;
	border: 6px solid black;
	width: 260px;
	text-align: center;
	font-size: 33px;	
	animation: banner_c 1s;
}
.mark p:nth-child(3) a{
	font-size: 18px;
	padding-top: 14px;
	font-style: italic;
	animation: banner_s 1s;
}
.mark p:nth-child(2) :hover{
	transform:scale(1.2);
	transition: all 1s;
	background-color:#828590 ;
} 
.main{
	height: 1076px;
	background-color: #ffffff;
}
.mainer{
	padding-top: 103px;
}
.mainer p:nth-child(1){

}
.mainer p:nth-child(2){
	padding-top: 52px;
	padding-bottom: 48px;
	position: relative;
}
.mainer p:nth-child(2)::before{
	content: "";
	background-color: #e8e8e8;
	width: 20px;
	height: 1px;
	top: 120px;
	left: 600px;
	position: absolute;
}
.mainer p:nth-child(2)::after{
	content: "";
	background-color: #e8e8e8;
	width: 20px;
	height: 1px;
	top: 120px;
	left: 658px;
	position: absolute;
}
.mainer p:nth-child(4){
	padding-top: 108px;
	padding-left: 338px;
	padding-right: 225px;
	text-align: center;
	font-size: 19px;
	padding-bottom: 108px;
}
.box{
	width: 7px;
	height: 7px;
	margin: 0 auto;
	background-color: #e0a240;
	transform: rotate(45deg);
	position: relative;
}
.main img{
	margin-left: 130px;
}
.icon{
	background-color: #f2f5f8;
	width: 319px;
	height: 246px;
}
.icon:nth-child(2n){
	background-color: #edf0f2;
}
.icon a{
	margin-top: 22px;
	text-align: center;
}
.icon span{
	margin-top: 62px;
	margin-left: 115px;
	font-size: 60px;
	line-height: 60px;
	transition: all 0.5s;
}
.ficon div:nth-child(1):hover span {
	transform: scale(1.3);
}
.ficon div:nth-child(2):hover span {
	transform: translateY(-30px);
}
.ficon div:nth-child(3):hover span {
	transform: translate(30px,30px);
}
.ficon div:nth-child(4):hover span {
	animation: t_rotate 1s;
} 
.banner .ban{
	width: 276px;
	padding-top: 130px;
	padding-left: 122px;
	position: relative;	
	padding-bottom: 224px;
}
.banner .bans{
	width: 276px;
	padding-top: 130px;
	padding-right: 72px;
	padding-bottom: 224px;
}
.banner .ban::after{
	content: "";
	background: url(../img/iphone-oshin-513x1024.png) no-repeat;
	background-size: 330px 682px;
	top: 90px;
	left: 386px;
	margin-left: 80px;
	width: 508px;
	height: 955px;
	position: absolute;
}
.banner .ban .mod:nth-child(2){
	padding-top: 70px;
	padding-bottom: 70px;
}
.banner .ban h4{
	padding-bottom: 28px;
}
.banner .bans .mod:nth-child(2){
	padding-top: 70px;
	padding-bottom: 70px;
}
.banner .bans h4{
	padding-bottom: 28px;
}
.banner p{
	text-align: left;
}
.banner .mod{
	position: relative;
}
.banner  span{
	position: absolute;
	left: -45px;
	font-size: 35px;
} 
.fix{
	width: 100%;
	background: url(../img/wanderlust01.jpg) no-repeat;
	height: 400px;
	width: 100%;
	background-size: cover;
	background-attachment:fixed;
	background-position: center;
}
.work p:nth-child(1){
	padding-top: 102px;
}
.work p:nth-child(2){
	padding-top: 50px;
	padding-bottom: 48px;
	position: relative;
}
.work p:nth-child(2)::after{
	content: "";
	background-color: #e8e8e8;
	width: 20px;
	height: 1px;
	top: 120px;
	left: 600px;
	position: absolute;
}
.work p:nth-child(2)::before{
	content: "";
	background-color: #e8e8e8;
	width: 20px;
	height: 1px;
	top: 120px;
	left: 658px;
	position: absolute;
}
.work ul{
	padding-top: 74px;
	padding-left: 366px;
}
.work ul li{

}
.work ul li a{
	display: block;
	color: black;
	font-size: 14px;
	line-height: 42px;
	padding-left: 23px;
	padding-right: 23px;
	border: 1px solid #fff;
}
.work ul li:nth-child(1) a{
	border: 1px solid yellow;
}
.work ul li a:hover{
	text-align: center;
	border: 1px solid yellow;
	color: yellow;
}
.workimg{
	width: 374px;
	height: 224px; 
	overflow: hidden;
	display: block;
	position: relative;
	margin:40px 0 0 40px;
}
.workimg img{
	width: 100%;
	height: 100%;
	transition: all 0.5s;
}
 .workimg:nth-child(2n+1) img:hover{
	transform:scale(1.2);
} 
.workimg:nth-child(2n)::after{
	content: "你好！";
	width: 374px;
	height: 221px;
	background: #e0a240;
	background-color: rgba(225,200,80,0);
	left: 0;
	top: 0;
	font-size: 25px;
	line-height: 221px;
	text-align: center;
	color: transparent;
	transition: all 0.5s;
	position: absolute;
}
.workimg:nth-child(2n):hover::after{
	background-color: rgba(225,200,80,0.5);
	color: black;
}
.workss{
	padding-top: 44px;
	padding-bottom: 94px;
}
.workss .works{
	margin-left: 560px;
	line-height: 46px;
	border: 2px solid black;
	width: 156px;
	height: 44px;
	text-align: center;
}
.bird{
	background-color: #f2f3f8;
	height: 412px;
}
.bird p{
	line-height: 50px;
	text-align: center;
}
.bird p:nth-child(1){
	padding-top: 216px;
}
.our p:nth-child(1){
	padding-top: 100px;
	font-size: 15px;
}
.our p:nth-child(2){
	padding-top: 48px;
	font-size: 20px;
	padding-bottom: 48px;
	position: relative;
}
.our p:nth-child(2)::before{
	content: "";
	background-color: #e8e8e8;
	width: 20px;
	height: 1px;
	top: 121px;
	left: 658px;
	position: absolute;
}
.our p:nth-child(2)::after{
	content: "";
	background-color: #e8e8e8;
	width: 20px;
	height: 1px;
	top: 121px;
	left: 600px;
	position: absolute;
}
.our img{
	padding-top: 100px;
	width: 620px;
	height: 426px;	
}
.our img:nth-child(1){
	padding-left: 10px;
}
.our img:nth-child(2){
	padding-left: 22px;
	padding-right: 10px;
}
.black{
	background-color: black;
	height: 336px;
}
.black p{
	color: white;
}
.black p:nth-child(1){
	padding-top: 100px;
	font-size: 15px;
}
.black p:nth-child(2){
	padding-top: 48px;
	text-align: center;
	font-size: 20px;
}
.black p a{
	color: white;
}
.black p:nth-child(3){
	background-color: #f0b452;
	margin-top: 38px;
	margin-left: 890px;
	padding-top: 19px;
	width: 112px;
	height: 30px;	
}
footer .oshin{
	width: 260px;
	padding-left: 60px;
	padding-top: 78px;
}
footer .oshin:nth-child(3){
	width: 102px;
}
footer .oshin:nth-child(4) h4{
	padding-bottom: 28px;
	padding-left: 8px;
}
footer p{
	text-align: left;
	line-height: 22px;
	color: #79838d;
	animation: _tshadow 1s infinite;
}
.oshin:nth-child(1) img{
	padding-bottom: 30px;
}
.facebook .fl{
	font-size: ;
	float: left;
	color: #e0a240;
	line-height: 28px;
	width: 28px;
	border: 1px solid #e0a240;
	border-radius: 100px;
	text-align: center;
	margin-top: 32px;
	margin-right: 32px;
}
.oshin ul{
	padding-top: 29px;
}
.oshin ul li{
	
}
.oshin ul li a{
	line-height: 48px;
	color: #828590;
	position: relative;
}
.oshin ul li a:hover{
	color: #e4ac81;
}
.oshin ul li a::after{
	content: "";
	border: 2px solid #828590;
	transform: rotate(45deg);
	border-bottom-color: transparent;
	border-left-color: transparent;
	width: 9px;
	height: 9px;
	top: 20px;
	left: -34px;
	position: absolute;
}
.oshin ul li a:hover::after{
	border-color: #e4ac81;
	border-bottom-color: transparent;
	border-left-color: transparent;
}
.oshin:nth-child(4) img{
	width: 70px;
	height: 70px;
	padding-top: 15px;
	padding-left: 10px;
}